// 定义一个名为 DepartmentQueryForm 的对象，用作 Vue 组件
const DepartmentQueryForm = {
    // 组件名称
    name: 'DepartmentQueryForm',
    // 组件模板
    template: `  
   <div>
    <form class="department-query-form" @submit.prevent="onSearch">  
    <div class="form-item"><input v-model="query.id" placeholder="部门编号" type="text" /></div>  
    <div class="form-item"><input v-model="query.name" placeholder="部门名称" type="text" /></div>  
    <div class="form-item"><input v-model="query.manager" placeholder="部门负责人" type="text" /></div>  

    <div>  
        <button class="button-class"  type="submit">查询</button>  
        <button class="button-class" type="button" @click="onReset" >重置</button>  
    </div>  
</form>  
</div>
  `,
    // 组件属性
    props: {},
    // 自定义事件
    emits: ['search'],
    // 组件设置函数
    setup(props, { emit }) {
        const query = Vue.ref({
            id: '',
            name: '',
            manager: ''
        });

        const onSearch = () => {
            emit('search', {...query.value});
        }

        const onReset = () => {
            query.value = {
                id: '',
                name: '',
                manager: ''
            };
            emit('search', {}); // 重置时也可自动搜索全部
        }
        // 返回表单数据及方法
        return { query, onSearch, onReset };
    }
};